<template>
    <div id="app">
        <router-body :banner ="banner_info" :router_path ="router_url"></router-body>
      </div>
</template>

<script>
import routerBody from './pages/index.vue'

export default {
  name: 'app',
  components: {
    routerBody
  },
  data() {
    return {
      banner: {
        index: {
          pc: [],
          mobile: []
        },
        web: {
          pc: {},
          mobile: {}
        },
        vr: {
          pc: {},
          mobile: {}
        },
        wechat: {
          pc: {},
          mobile: {}
        },
        example: {
          pc: {},
          mobile: {}
        },
        news: {
          pc: {},
          mobile: {}
        },
        about: {
          pc: {},
          mobile: {}
        },
        app: {
          pc: {},
          mobile: {}
        }
      },
      banner_info: {
        pc: {},
        mobile: {}
      },
      router_url: ''
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.ajaxs('index/index', {
        success: res => {
          this.banner = res.msg
          this.banner_info = this.banner[this.$route.name]
          if (this.banner_info == undefined) {
            this.banner_info = {
              mobile: { src: 'https://jingye.oss-cn-qingdao.aliyuncs.com/serv-top.png' },
              pc: { src: 'https://jingye.oss-cn-qingdao.aliyuncs.com/serv-top.png' }
            }
          }
          // console.log(this.banner_info)
        }
      })
    },
    //百度主动推送
    baiduSend() {
      var bp = document.createElement('script')
      var curProtocol = window.location.protocol.split(':')[0]
      if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'
      } else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js'
      }
      var s = document.getElementsByTagName('script')[0]
      s.parentNode.insertBefore(bp, s)
    }
  }, //监听器
  watch: {
    // 方法1
    $route(to, from) {
      this.baiduSend() 
      //监听路由是否变化
      this.router_url = to.path
      this.banner_info = this.banner[to.name]
      // if (to.name = 'website') this.banner_info = this.banner.web
      if (this.banner_info == undefined) {
        this.banner_info = {
          mobile: { src: 'https://jingye.oss-cn-qingdao.aliyuncs.com/serv-top.png' },
          pc: { src: 'https://jingye.oss-cn-qingdao.aliyuncs.com/serv-top.png' }
        }
      }
    }
  }
}
</script>

<style>
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 3px;
  /*滚动条宽度*/
  height: 6px;
  /*滚动条高度*/
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  /*滚动条的背景区域的圆角*/
  background-color: #f8f8f8;
  /*滚动条的背景颜色*/
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  /*滚动条的圆角*/
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #ccc;
  /*滚动条的背景  颜色*/
}

* {
  padding: 0;
  margin: 0;
  box-sizing: content-box !important;
}

body,
#app {
  background: #fff;
}

ul {
  list-style: none !important;
}

a {
  text-decoration: none !important;
  color: #333 !important;
}

a.link-active {
  color: #d6151a !important;
}

/* css 的初始化 */

/* 指定当前css文件, 编码格式是utf-8 */
@charset "UTF-8";

/* 清除默认的外边距和内边距
    其实并不是每个标签都有默认的内外边距的，原来使用*的方法在大项目，
    动辄几万个标签的页面就非常消耗性能了,所以大项目中一般会找到有默认
    margin和padding的标签单独清除会更好一点
 */
html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
img {
  margin: 0;
  padding: 0;
}

img,
input,
button,
textarea {
  border: none;
  padding: 0;
  margin: 0;
  /*去除点击之后的轮廓线*/
  outline-style: none;
}

ul,
ol {
  list-style: none;
}

input {
  font-family: 'SimSun', '宋体';
}

select,
input,
textarea {
  font-size: 12px;
  margin: 0;
}

textarea {
  /*禁止文本框的用户自由缩放*/
  resize: none;
}

img {
  border: 0;
  /* 设置图片默认的垂直对齐方式为中线对齐*/
  vertical-align: middle;
}

table {
  /*边框合并*/
  border-collapse: collapse;
}

body {
  /* 将整个页面的字体, 默认重置 */
  font: 12px/18px Microsoft YaHei, Arial, Verdana, 'SimSun';
  color: #666;
  background: #fff;
}

/*双伪元素清除法：
    1、清除浮动
    2、解决margin的塌陷问题
*/
.clearfix::before,
.clearfix::after {
  content: '';
  display: table;
}

.clearfix::after {
  clear: both;
}

/* 兼容 IE 67 */
.clearfix {
  *zoom: 1;
}

a {
  color: #666;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-decoration: none;
  font-weight: normal;
  font-size: 100%;
}

/* 
  buis因为没有语义，所以不推荐用来给文字设置样式，但是有的时候需要一些没有语言的标签来打下手，
  比如字体tb等等，此时可以废物利用，把之前不推荐使用的标签去除样式，来用于其他用途。
*/
i,
s {
  font-style: normal;
  text-decoration: none;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

/*
  版心：宽度固定并且水平居中的盒子
  在使用别人写好的base.css文件时，注意每个页面的版心可能是不一样的，需要单独测量设置
*/
.w {
  width: 1200px;
  margin: 0 auto;
}

/*body {
  height: 3000px;
}*/
</style>
